<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="favicon.ico" rel="shortcut icon">
    <script src="/lib/echarts.min.js"></script>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1000px;height:400px;"></div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');

        $(function() {

            /**
             * 玫瑰图表
             */
            $.ajax({
                "url": "http://localhost:8080/doctor/pies",
                "success": function(result) {
                    /**
                     * 玫瑰图表
                     */
                    console.log(result)
                    var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
                    var optionPies = {
                        title: {
                            text: '各部门人数占比',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            roseType: 'radius',
                            data: result,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    echartsPies.setOption(optionPies);
                }
            })




            $.ajax({
                "url": "http://localhost:8080/doctor/bar",

                "success": function(result) {

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '部门人数统计'
                        },
                        tooltip: {},
                        legend: {
                            data: ['各部门人数']
                        },
                        xAxis: {
                            data: result.nameList
                        },
                        yAxis: {},
                        series: [{
                            name: '人数',
                            type: 'bar',
                            data: result.numList
                        }]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        });
    </script>
</body>

</html>